<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="include/admin/adminHeader::html('用户管理')" ></head>
<body>
<div th:replace="include/admin/adminNavigator::html" ></div>
<script>
    $(function(){
        var data4Vue = {
            uri:'users',
            beans: []
        };

        //ViewModel
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list();
            },
            methods: {
                list:function(){
                    var url =  this.uri;
                    axios.get(url).then(function(response) {
                        vue.beans = response.data;
                        console.log(response.data)
                    });
                },
                deleteBean: function (id) {
                    if(!checkDeleteLink())
                        return;
                    var url = this.uri+"/"+id;
                            axios.delete(url).then(function(response){
                                if(0!=response.data.length){
                                    alert(response.data);
                                }
                                else{
                                    vue.list(0);
                        }
                    });
                },
            }
        });
    });

</script>
<div id="workingArea" >
    <h1 class="label label-info" >用户管理</h1>
    <br>
    <br>
    <!--private String username;-->
    <!--private String password;-->
    <!--private String realname;-->
    <!--private long tel;-->
    <!--private String dfAddress;-->
    <!--private String emgContactName;-->
    <!--private long emgContactNum;-->
    <!--private long del;-->
    <!--private java.sql.Timestamp createTime;-->
    <!--private java.sql.Timestamp updateTime;-->

    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover  table-condensed">
            <thead>
            <tr class="info">
                <th>用户名</th>
                <th>真实姓名</th>
                <th>联系电话</th>
                <th>默认地址</th>
                <th>紧急联系人</th>
                <th>编辑</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="bean in beans ">
                <td>{{bean.username}}</td>
                <td>{{bean.realname}}</td>
                <td>{{bean.tel}}</td>
                <td>{{bean.dfAddress}}</td>
                <td>
                    {{bean.emgContactName}}</a>
                </td>

                <td>
                    <a :href="'admin_user_edit?id=' + bean.id "><span class="glyphicon glyphicon-edit"></span></a>
                </td>
                <td>
                     <a href="#nowhere"  @click="deleteBean(bean.id)"><span class="   glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div th:replace="include/admin/adminFooter::html" ></div>
</body>
</html>
